/*
 * @Author: 一路向阳 tt_sunzhenfeng@163.com
 * @Date: 2024-03-19 14:45:41
 * @LastEditors: 一路向阳 tt_sunzhenfeng@163.com
 * @LastEditTime: 2024-03-19 18:55:47
 * @FilePath: \react-demo\src\page\Month\components\DailyBill\index.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE 
 */
import classNames from 'classnames';
import { useState } from 'react';
import Icon from '@/components/Icon';
import OneLineOverview from '@/components/OneLineOverview'
import { billTypeToName } from '@/contants';

import './index.scss';

const DailyBill = props => {
const { dateText, overview, billList } = props;

const [expand, setExpand] = useState(false);

console.log(expand);

  return (
    <div className={classNames('dailyBill', expand && 'expand')}>
      <div className="header">
        <div
          className="dateIcon"
        >
          <span className="date">{dateText}</span>
          <span 
            className={classNames('arrow', !expand && 'expand')} 
            onClick={
            () => {
              setExpand(!expand);
            }
          }
          ></span>
        </div>
        <OneLineOverview pay={overview.pay} income={overview.income} />
      </div>
      {/* 单日列表 */}
      <div className="billList" style={{ display: !expand && 'none' }}>
        {
          billList.map(item => {
            return (
              <div className="bill" key={item.id}>
              <div className="icon">
                <Icon type={item.useFor} />
              </div>
              <div className="detail">
                <div className="billType">{billTypeToName[item.useFor]}</div>
              </div>
              <div className={classNames('money', item.type)}>
                {item.money.toFixed(2)}
              </div>
            </div>
            );
          })
        }
      </div>
    </div>
  )
}
export default DailyBill;